button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

.yh-button {
  position: relative;
  z-index: 0;
  overflow: hidden;
  font-size: 14px;
  base: none;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  background-color: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  white-space: nowrap;
  border-radius: 4px;
  transition: all .2s linear;
  user-select: none;
  touch-action: manipulation;
  line-height: 1.15;
}


/* .yh-is-loading .yh-icons-button-loading,.yh-is-loading .yh-button__text{
  display: inline-block;
} */
.yh-button__text {
  position: relative;
  z-index: 1;
}

.yh-button:not(.t-is-disabled):not(.t-button--ghost) {
  --ripple-color: var(--yh-bg-color-container-active);
}

/* button 大中小*/

.yh-button.yh-button--size-medium {
  height: 32px;
  font-size: 14px;
  padding-left: 15px;
  padding-right: 15px;
}




.yh-button.yh-button--size-small {
  height: 24px;
  font-size: 12px;
  padding-left: 7px;
  padding-right: 7px;
  line-height: 1;
}

.yh-button.yh-button--size-large {
  height: 40px;
  font-size: 16px;
  padding-left: 23px;
  padding-right: 23px;
}

/* 按钮形状   圆角长方形*/
.yh-button--shape-round {
  border-radius: 16px;

}

.yh-button--shape-round.yh-button--size-small {
  border-radius: 12px;
}

.yh-button--shape-round.yh-button--size-large {
  border-radius: 20px;
}

/* 按钮形状   圆形*/
.yh-button--shape-circle {
  border-radius: 16px;
  width: 32px;
  padding: 0;
  text-align: center;
}

.yh-button--shape-circle.yh-button--size-small {
  border-radius: 12px;
  width: 24px;
  padding: 0;
  text-align: center;
}

.yh-button--shape-circle.yh-button--size-large {
  border-radius: 20px;
  width: 40px;
  padding: 0;
  text-align: center;
}

/* block按钮 */
.yh-button.yh-size-full-width {
  /* display: block; */
  width: 100%;
}

/* 文字按钮 基础*/
.yh-button--variant-text {
  background-color: transparent;
  border-color: transparent;
  color: var(--yh-text-color-primary);
}

.yh-button.yh-button--variant-text:not(.yh-is-disabled):not(.yh-button--ghost) {
  --ripple-color: var(--yh-bg-color-container-active);
}

.yh-button--variant-text:hover {
  background-color: var(--yh-bg-color-container-hover);
}

.yh-button--variant-text.yh-is-disabled:hover {
  background-color: transparent;
}

/* 描边按钮 基础 */
.yh-button--variant-outline {
  color: var(--yh-text-color-primary);
  background-color: var(--yh-bg-color-specialcomponent);
  border-color: var(--yh-border-level-2-color);
}

/* 虚线按钮 基础 */

.yh-button--variant-dashed {
  border-style: dashed;
  color: var(--yh-text-color-primary);
  background-color: var(--yh-bg-color-specialcomponent);
  border-color: var(--yh-border-level-2-color);
}

/* 虚线按钮与描边按钮  hover disavled */
.yh-button--variant-outline:hover,
.yh-button--variant-dashed:hover {
  border-color: var(--yh-brand-color-hover);
  background-color: var(--yh-bg-color-specialcomponent);
  color: var(--yh-brand-color-hover);
}

.yh-button--variant-outline.yh-is-disabled,
.yh-button--variant-dashed.yh-is-disabled {
  border-color: var(--yh-border-level-2-color);
  background-color: var(--yh-bg-color-component-disabled);
  color: var(--yh-text-color-disabled);
}

/************************************************* button variant-default 默认主题 ******************************************************************************/
.yh-button--variant-base.yh-button--theme-default {
  background-color: var(--yh-bg-color-component);
  border-color: var(--yh-bg-color-component);
  color: var(--yh-text-color-primary);
}

.yh-button--variant-base.yh-button--theme-default:hover {
  border-color: var(--yh-bg-color-component-hover);
  background-color: var(--yh-bg-color-component-hover);
  color: var(--yh-text-color-primary);
}

.yh-button--variant-base.yh-button--theme-default.yh-is-disabled {
  background-color: var(--yh-bg-color-component-disabled);
  border-color: var(--yh-bg-color-component-disabled);
  color: var(--yh-text-color-disabled);
}

.yh-button--variant-base.yh-button--theme-default:not(.yh-is-disabled):not(.yh-button--ghost) {
  --ripple-color: var(--yh-bg-color-component-active);
}

.yh-button--variant-base.yh-button--theme-default {
  background-color: var(--yh-bg-color-component);
  border-color: var(--yh-bg-color-component);
  color: var(--yh-text-color-primary);
}

/* 文字按钮 默认主题*/
.yh-button--variant-text.yh-button--theme-default.yh-is-disabled {
  color: var(--yh-text-color-disabled);
}

/* 线框按钮 默认主题*/


/***********************************button variant-base & theme-primary  主要颜色********************************************************************/
.yh-button--variant-base.yh-button--theme-primary {
  color: var(--yh-text-color-anti);
  background-color: var(--yh-brand-color);
  border-color: var(--yh-brand-color);
}

.yh-button--variant-base.yh-button--theme-primary:not(.yh-is-disabled):not(.yh-button--ghost) {
  --ripple-color: var(--yh-brand-color-active);
}

.yh-button--variant-base.yh-button--theme-primary:hover {
  background-color: var(--yh-brand-color-hover);
  border-color: var(--yh-brand-color-hover);
}

.yh-button--variant-base.yh-button--theme-primary.yh-is-disabled {
  background-color: var(--yh-brand-color-disabled);
  border-color: var(--yh-brand-color-disabled);
}

/* 文字按钮 主要颜色*/
.yh-button--variant-text.yh-button--theme-primary {
  color: var(--yh-brand-color);
}

.yh-button--variant-text.yh-button--theme-primary:hover {
  color: var(--yh-brand-color-hover);
}

.yh-button--variant-text.yh-button--theme-primary.yh-is-disabled {
  color: var(--yh-brand-color-disabled);
}

/* 线框按钮 虚线 主要   */
.yh-button--variant-outline.yh-button--theme-primary,
.yh-button--variant-dashed.yh-button--theme-primary {
  color: var(--yh-brand-color);
  border-color: var(--yh-brand-color);
}

.yh-button--variant-outline.yh-button--theme-primary:hover,
.yh-button--variant-dashed.yh-button--theme-primary:hover {
  border-color: var(--yh-brand-color-hover);
  background-color: var(--yh-bg-color-specialcomponent);
  color: var(--yh-brand-color-hover);
}

.yh-button--variant-outline.yh-button--theme-primary.yh-is-disabled,
.yh-button--variant-dashed.yh-button--theme-primary.yh-is-disabled {
  color: var(--yh-brand-color-disabled);
  border-color: var(--yh-brand-color-disabled);
  background-color: var(--yh-bg-color-component-disabled);
}

/************************************************button variant-base & theme-danger   危险************************************************/
.yh-button--variant-base.yh-button--theme-danger {
  color: var(--yh-text-color-anti);
  background-color: var(--yh-error-color);
  border-color: var(--yh-error-color);
}

.yh-button--variant-base.yh-button--theme-danger:not(.yh-is-disabled):not(.yh-button--ghost) {
  --ripple-color: var(--yh-error-color-active);
}

.yh-button--variant-base.yh-button--theme-danger:hover {
  background-color: var(--yh-error-color-hover);
  border-color: var(--yh-error-color-hover);
}

.yh-button--variant-base.yh-button--theme-danger.yh-is-disabled {
  background-color: var(--yh-error-color-disabled);
  border-color: var(--yh-error-color-disabled);
}

/* 文字按钮  危险*/
.yh-button--variant-text.yh-button--theme-danger {
  color: var(--yh-error-color);
}

.yh-button--variant-text.yh-button--theme-danger:hover {
  color: var(--yh-error-color-hover);
}

.yh-button--variant-text.yh-button--theme-danger.yh-is-disabled {
  color: var(--yh-error-color-disabled);
}

/* 线框按钮 虚框 危险 */
.yh-button--variant-outline.yh-button--theme-danger,
.yh-button--variant-dashed.yh-button--theme-danger {
  color: var(--yh-error-color);
  border-color: var(--yh-error-color);
}

.yh-button--variant-outline.yh-button--theme-danger:hover,
.yh-button--variant-dashed.yh-button--theme-danger:hover {
  border-color: var(--yh-error-color-hover);
  background-color: var(--yh-bg-color-specialcomponent);
  color: var(--yh-error-color-hover);
}

.yh-button--variant-outline.yh-button--theme-danger.yh-is-disabled,
.yh-button--variant-dashed.yh-button--theme-danger.yh-is-disabled {
  color: var(--yh-error-color-disabled);
  border-color: var(--yh-error-color-disabled);
  background-color: var(--yh-bg-color-component-disabled);
}

/************************************************button variant-base & theme-warning  警告************************************************/
.yh-button--variant-base.yh-button--theme-warning {
  color: var(--yh-text-color-anti);
  background-color: var(--yh-warning-color);
  border-color: var(--yh-warning-color);
}

.yh-button--variant-base.yh-button--theme-warning:not(.yh-is-disabled):not(.yh-button--ghost) {
  --ripple-color: var(--yh-warning-color-active);
}

.yh-button--variant-base.yh-button--theme-warning:hover {
  background-color: var(--yh-warning-color-hover);
  border-color: var(--yh-warning-color-hover);
}

.yh-button--variant-base.yh-button--theme-warning.yh-is-disabled {
  background-color: var(--yh-warning-color-disabled);
  border-color: var(--yh-warning-color-disabled);
}

/* 文字按钮 警告*/
.yh-button--variant-text.yh-button--theme-warning {
  color: var(--yh-warning-color);
}

.yh-button--variant-text.yh-button--theme-warning:hover {
  color: var(--yh-warning-color-hover);
}

.yh-button--variant-text.yh-button--theme-warning.yh-is-disabled {
  color: var(--yh-warning-color-disabled);
}

/* 线框按钮  dashed | outline*/
.yh-button--variant-outline.yh-button--theme-warning,
.yh-button--variant-dashed.yh-button--theme-warning {
  color: var(--yh-warning-color);
  border-color: var(--yh-warning-color);
}

.yh-button--variant-outline.yh-button--theme-warning:hover,
.yh-button--variant-dashed.yh-button--theme-warning:hover {
  border-color: var(--yh-warning-color-hover);
  background-color: var(--yh-bg-color-specialcomponent);
  color: var(--yh-warning-color-hover);
}

.yh-button--variant-outline.yh-button--theme-warning.yh-is-disabled,
.yh-button--variant-dashed.yh-button--theme-warning.yh-is-disabled {
  color: var(--yh-warning-color-disabled);
  border-color: var(--yh-warning-color-disabled);
  background-color: var(--yh-bg-color-component-disabled);
}

/************************************************button variant-base & theme-success 成功************************************************/
.yh-button--variant-base.yh-button--theme-success {
  color: var(--yh-text-color-anti);
  background-color: var(--yh-success-color);
  border-color: var(--yh-success-color);
}

.yh-button--variant-base.yh-button--theme-success:not(.yh-is-disabled):not(.yh-button--ghost) {
  --ripple-color: var(--yh-success-color-active);
}

.yh-button--variant-base.yh-button--theme-success:hover {
  background-color: var(--yh-success-color-hover);
  border-color: var(--yh-success-color-hover);
}

.yh-button--variant-base.yh-button--theme-success.yh-is-disabled {
  background-color: var(--yh-success-color-disabled);
  border-color: var(--yh-success-color-disabled);
}

/* 文字按钮 成功 */
.yh-button--variant-text.yh-button--theme-success {
  color: var(--yh-success-color);
}

.yh-button--variant-text.yh-button--theme-success:hover {
  color: var(--yh-success-color-hover);
}

.yh-button--variant-text.yh-button--theme-success.yh-is-disabled {
  color: var(--yh-success-color-disabled);
}

/* 线框按钮 成功  dashed | outline**/
.yh-button--variant-outline.yh-button--theme-success,
.yh-button--variant-dashed.yh-button--theme-success {
  color: var(--yh-success-color);
  border-color: var(--yh-success-color);
}

.yh-button--variant-outline.yh-button--theme-success:hover,
.yh-button--variant-dashed.yh-button--theme-success:hover {
  border-color: var(--yh-success-color-hover);
  background-color: var(--yh-bg-color-specialcomponent);
  color: var(--yh-success-color-hover);
}

.yh-button--variant-outline.yh-button--theme-success.yh-is-disabled,
.yh-button--variant-dashed.yh-button--theme-success.yh-is-disabled {
  color: var(--yh-success-color-disabled);
  border-color: var(--yh-success-color-disabled);
  background-color: var(--yh-bg-color-component-disabled);
}

/* yh-is-disabled  禁用*/
.yh-is-disabled {
  cursor: not-allowed;
}

/***************************************************  button end************************************************************************************/
.yh-zoom-in-top-enter-active,
.yh-zoom-in-top-leave-active {
  opacity: 1;
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  -webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
  transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
  transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1);
  transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
  -webkit-transform-origin: center top;
  transform-origin: center top
}

.yh-zoom-in-top-enter,
.yh-zoom-in-top-leave-active {
  opacity: 0;
  -webkit-transform: scaleY(0);
  transform: scaleY(0)
}

.yh-box-shadow {
  box-shadow: 1px 2px 1px rgb(0 0 0 / 15%);
}

.viewer-fade-enter-active {
  -webkit-animation: viewer-fade-in .3s;
  animation: viewer-fade-in .3s
}

.viewer-fade-leave-active {
  -webkit-animation: viewer-fade-out .3s;
  animation: viewer-fade-out .3s
}

.el-input__inner {
  background: var(--yh-bg-color-container);
  border-color: var(--yh-component-border);
  color: var(--yh-text-color-secondary);
}

.el-input__inner::-webkit-input-placeholder {
  color: var(--yh-text-color-placeholder);
}